.resume-out, .timeline span:hover {
  background-color: #000;
}
.timeline span:hover > h3,
.timeline span:hover > p {
  color: #fff;
}
.timeline p{font-size:24px;line-height:1.5;}


.text {
  color: #fff;
}

.resume h3, .resume p {
  color: #000;
}


.resume h3 {
	font-size:28px;
	margin-bottom:18px;
}

.resume, .resume h2 {padding:20px;}

.timeline span {
  width:80%;
  margin:auto;
  border-radius: 15px;
  display: block;
  background-color: #fff;
  margin-bottom:40px;
  padding:20px;}


.timeline
	{padding-bottom:0px;
	 }

@media (min-width: 576px) {

}
@media (min-width: 768px) {}
@media (min-width: 992px) {
	

.timeline
	{margin-bottom:960px;}
.timeline span {
width:auto;}	
}
@media (min-width: 1200px) {

.resume {
  width: 80%;
  margin: 0 auto;
  padding:0;
}
.resume h2 {padding:0;}

.timeline {background-color:#000;
  padding-top: 5%;
}

.timeline a {
  margin:0;
  transition: all 0.5s;
}

span:hover p, span:hover h3
{color:#fff;}

.timeline h3::after {
  content: "";
  position: absolute;
  height: 3px;
  width: 100px;

  top: 0;
  bottom: 0;
  margin: auto;
}
.timeline li {
  padding-top: 25px;
  padding-bottom: 25px;
  border-radius: 10px;
  width: 50%;
  position: relative;
}
.timeline li::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;

}
.timeline li:nth-child(odd) {
  float: left;
  padding-right: 100px;

}
.timeline li:nth-child(odd) h3::after {
  right: 0;
}
.timeline li:nth-child(odd)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: 100%;
  
}
.timeline li:nth-child(odd)::before {
  right: -10px;
}
.timeline li:nth-child(even) {
  float: right;
  padding-left: 100px;
  transform: translateY(50%);

}
.timeline li:nth-child(even) h3::after {
  left: 0;
}
.timeline li:nth-child(even):last-child {
  height: 50%;
}
.timeline li:nth-child(even)::before {
  left: -10px;
}
}
@media (min-width: 1400px) {}